<template>
  <div>
    <van-nav-bar title="设置" @click-left="onClickLeft" left-arrow />
    <div class="set-box">
      <van-cell center is-link value="修改资料" @click="recomposeClick">
        <div class="box1">
          <div class="left">
            <!-- 头像 -->
            <van-image
              round
              width="50px"
              height="50px"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <!-- 用户姓名 -->
            <div>{{user.nickname}}</div>
          </div>
          <div class="right">
            <span>修改资料</span>
          </div>
        </div>
      </van-cell>
      <!-- 开关 -->
      <div class="set-video">
        <van-cell center title="允许3G/4G网络播放、缓存视频">
          <template #right-icon>
            <van-switch
              v-model="checked1"
              size="24"
              active-color="#72d18c"
              inactive-color="#dcdee0"
            />
          </template>
        </van-cell>
        <van-cell center title="视频自动连续播放">
          <template #right-icon>
            <van-switch
              v-model="checked2"
              size="24"
              active-color="#72d18c"
              inactive-color="#dcdee0"
            />
          </template>
        </van-cell>
      </div>
      <!-- 更多 -->
      <van-cell-group>
        <van-cell center title="清除缓存" @click="cacheClick" value="36.5MB" />
        <van-cell center title="调整学习兴趣" @click="adjustClick" is-link />
        <van-cell center title="版本更新" @click="updateClick" is-link />
        <van-cell center title="关于" is-link />
      </van-cell-group>
      <div class="btn">
        <button class="btn-login" @click="showPopup">退出登录</button>
        <van-popup v-model="show">
          <div class="show-box">
            <div class="btn-text">确定退出在线课堂吗？</div>
            <div class="btn-box" @click="btnClick">
              <button class="btn1">取消</button>
              <button class="btn2">确定</button>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { delStoreUser } from '@/utils/store'
export default {
  data() {
    return {
      checked1: false,
      checked2: false,
      show: false,
    };
  },
  computed:{
    user(){
      return this.$store.state.person
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    recomposeClick(){
      this.$router.push("/recompose");
    },
    cacheClick(e) {
      if (e.target.nodeName !== "SPAN" || e.target.innerHTML == "清除缓存")
        return;
      e.target.innerHTML = "0MB";
    },
    adjustClick() {
      this.$router.push("/classify");
    },
    updateClick() {
      this.$toast("当前已经是最新版本");
    },

    showPopup() {
      this.show = true;
    },
    btnClick(e) {
      if (e.target.className !== "btn1") {
        this.$store.commit("user/setUser", {
          id: 0,
          token: "",
          nickname: "",
          myAttention: [],
          orderCount: 0,
          balance: 0,
          todayLearnTime: 0,
          continuous: 0,
          total: 0,
          mysession: [],
          lately: [],
          latelyTime: [],
        });
        delStoreUser();
        this.$router.push("/login");
      } else {
        this.show = false;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.van-nav-bar {
  height: 54px;
  line-height: 54px;
  .van-icon {
    color: #333333;
  }
}

.set-box {
  height: 652px;
  background: #f2f2f2;
  padding-top: 10px;
  .van-cell {
    width: 375px;
    height: 62px;
    .box1 {
      display: flex;
      align-items: center;
      margin-left: 5px;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .van-image {
          margin-right: 10px;
        }
      }
    }
  }
  .set-video {
    margin: 10px 0;
  }
  .btn {
    width: 335px;
    height: 45px;
    margin: 0 auto;
    .btn-login {
      width: 335px;
      height: 45px;
      margin-top: 80px;
      color: #ea3223;
      border: 1px solid #ea3223;
      font-size: 15px;
    }
    .van-popup {
      width: 260px;
      height: 143px;
      margin: 0 auto;
      .show-box {
        width: 260px;
        height: 143px;
        margin: 0 auto;
        text-align: center;
        .btn-text {
          width: 100%;
          height: 92px;
          line-height: 92px;
          color: #cccccc;
          font-size: 18px;
        }
        .btn-box {
          display: flex;
          font-size: 18px;
          button {
            width: 50%;
            height: 50px;
            color: #cccccc;
            border: none;
          }
        }
      }
    }
  }
}
</style>